<template>
	<!-- <bear_content> -->
	<div class="box_cont">
		<div class="tab_cont flex_center_between">
			<div class="flex_center">
				<div class="tab_item cur transition" :class="activeName == 0 ? 'stetus' : ''" @click="changeTabFun(0)">教授学员
				</div>
				<div class="tab_item cur transition" :class="activeName == 1 ? 'stetus' : ''" @click="changeTabFun(1)">推广学员
				</div>
			</div>

			<div class="header">
				<el-input class="search cur search-list" style="width: 280px;border-radius: 20px"
					placeholder="请输入学员姓名搜索" v-model="search.userName">
					<template slot="append">
						<div @click="searchFun">搜索</div>
					</template>
				</el-input>
			</div>
		</div>
		<el-card shadow="never" border="false" v-loading="loading">
			<template>
				<div class="flex_column_between h_full" v-if="listData.length > 0">

					<!-- 内容部分 -->
					<el-table :data="listData" style="width: 100%">
						<el-table-column prop="userName" label="学生姓名" align="left">
							<template #default="scope">
								<div class="flex_center">
									<el-image :src="scope.row.portrait.url"
										v-if="scope.row.portrait && scope.row.portrait.path" class="column-image" />
									{{ scope.row.name }}
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="classHour30" label="30分钟剩余课时" align="center">
							<template slot-scope="scope">
								<span
									:class="scope.row.classHour30 == 0 ? 'color_red' : 'themeFont'">{{ scope.row.classHour30 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="classHour60" label="60分钟剩余课时" align="center">
							<template slot-scope="scope">
								<span
									:class="scope.row.classHour60 == 0 ? 'color_red' : 'themeFont'">{{ scope.row.classHour60 }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center" width="350">
							<template #default="scope">
								<div class="actions">
									<div class="item flex_center cur" @click="goUserInfo(scope.row)">
										<img class="info" src="@/assets/img/msg.png" alt="" srcset="">个人信息
									</div>
									<div class="item flex_center cur" @click="goReadList(scope.row)">
										<img class="testc" src="@/assets/img/atted.png" alt="" srcset="">阅读记录
									</div>
									<div class="item flex_center cur" @click="goExam(scope.row)">
										<img class="testc" src="@/assets/img/atted.png" alt="" srcset="">测试记录
									</div>
								</div>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页 -->
					<pagination :total="total" :currentPage="currentPage" :pageSize="pageSize"
						@current-change="changePage" v-if="listData.length > 0"></pagination>

				</div>
				<template v-else>
					<empty type="1" text="暂无学员"></empty>
				</template>

			</template>

		</el-card>
	</div>
	<!-- </bear_content> -->
</template>

<script>
import { userList } from '@/api/user.js'
import bear_content from '@/views/components/bear_content.vue'

export default {
	components: {
		bear_content
	},
	data() {
		return {
			loading: false,
			activeName: '0',
			search: {
				userName: ''
			},
			listData: [],
			currentPage: 1, // 当前页
			pageSize: 15, // 每页条数
			total: 0, // 总条数
		}
	},
	mounted() {
		this.getUserList()
	},
	methods: {
		async getUserList() {
			this.loading = true
			this.search.page = this.currentPage
			await userList(this.search).then(res => {
				this.loading = false
				if (res.error === 0) {
					this.listData = res.data.list
					this.total = res.data.total
					this.pageSize = res.data.perPage
				}
			})
		},
		//查看学员信息
		goUserInfo(row) {
			this.$router.push({ path: '/student/info', query: { id: row.id } })
		},
		goExam(row) {
			this.$router.push({ path: '/vocabulary/exam/list', query: { userId: row.id, source: '/student/list' } })
		},
		goReadList(row) {
			this.$router.push({ path: '/readlist/record', query: { userId: row.id } })
		},
		changeTabFun(type) {
			this.activeName = type
			this.search.userName = ''
			this.currentPage = 1
			if (type == 1) {
				this.search.type = 2
			} else {
				this.search.type = 1
			}
			this.getUserList()
		},
		changePage(page) {
			this.currentPage = page
			this.getUserList()
		},
		searchFun() {
			this.currentPage = 1
			this.getUserList()
		}
	}
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";

.column-image {
	height: 5rem;
	border-radius: 100%;
	margin-right: 10px
}

.color_red {
	color: #FF5252;
}

.tab_cont {
	width: 100%;
	text-align: left;
	// margin-bottom: 20px;
	padding: 2rem;

	.tab_item {
		font-size: 3.2rem;
		position: relative;
		padding-bottom: 1rem;
		margin-right: 6.4rem;
		color: #626780;
		border-bottom: 2px solid transparent;

		&:hover {
			border-color: rgba($color: #019E69, $alpha: .3)
		}
	}

	.stetus {
		border-color: #019E69;
		color: #1A1A1A;

		&:hover {
			border-color: #019E69;
		}
	}
}

.el-card {
	border-radius: 20px;
	width: 100%;
	height: 100%;
	border: none;
	background: transparent;

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 1.6rem;

		.search {

			// border: 1px solid $background-theme;
			// border-radius: 10px 0px 0px 10px;
			::v-deep .el-input__inner {
				border-radius: 10px 0px 0px 10px !important;
				border: 1px solid $background-theme !important;

			}
		}
	}

	.actions {
		font-size: 1.8rem;
		display: flex;
		justify-content: space-around;
		color: #3A3F5E;

		>i:hover {
			color: rgba(114, 124, 245, 1);
			cursor: pointer;
		}

		.item:hover {
			color: $theme-color;

			.info {
				content: url(@/assets/img/msg_1.png);
			}

			.testc {
				content: url(@/assets/img/atted_1.png);
			}
		}
	}
}

.el-pagination {
	margin-top: 20px;
	text-align: center;
}

.el-breadcrumb {
	margin-top: 10px;
}

.el-form {
	padding-right: 4rem;
}

.el-rate {
	padding: 10px 0;
}

::v-deep .el-input-group__append {
	border-radius: 0px 1rem 1rem 0px;
	color: #fff;
	background: $background-theme;
	border: 1px solid $background-theme;

}

::v-deep .el-card__header {
	border-bottom: none;
}

::v-deep .el-card__body {
	height: calc(100% - 8.4rem);
	padding: 1rem 2rem 2rem;
}

::v-deep .el-table::before {
	background-color: #fff;
}

::v-deep .el-table {
	overflow-y: scroll;
	font-size: 2rem;

	&::-webkit-scrollbar {
		width: 6px;
		height: 1px;
	}

	&::-webkit-scrollbar-thumb {
		border-radius: 5px;
		background-color: #019E69;
	}

	&::-webkit-scrollbar-track {
		background: #fff;
		border-radius: 5px;
	}
}

//  ::v-deep .el-input__inner{
//     border: 1px solid $background-theme;
//     border-radius: 10px 0px 0px 10px;

//  }</style>